<template>
  <div class="cms-views-container relative floatad-cms-pages">
    <div class="mask-box"></div>

    <div class="w-full px-4 absolute bottom-[52px] left-0 right-0">
      <div class="h-5 text-right mb-3">
        <close-circle-outlined class="text-xl text-white" />
      </div>
      <img
        src="https://img1.baidu.com/it/u=817244212,484997826&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=256"
        class="w-full h-full"
        fit="cover"
        alt=""
      />
      <span
        class="inline-block absolute top-8 left-4 px-[6px] py-[2px] text-white text-xs bg-black bg-opacity-30 rounded-tl-lg rounded-br-lg"
        >广告</span
      >
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.floatad-cms-pages {
  .mask-box {
    @apply w-full h-full absolute top-0 left-0 right-0;
    background: rgba(0, 0, 0, 0.6);
  }
}
</style>
